<script setup name="navs">
const iconNavs = [
  {
    icon: 'user',
    color: 'rgba(59, 130, 246, 0.5)',
    title: '用户',
    path: '/user/list',
  },
  {
    icon: 'shopping-cart',
    color: 'rgba(139, 92, 246, 1)',
    title: '商品',
    path: '/goods/list',
  },
  {
    icon: 'tickets',
    color: 'rgba(217, 70, 239, 1)',
    title: '订单',
    path: '/order/list',
  },
  {
    icon: 'chat-dot-square',
    color: 'rgba(20, 184, 166, 1)',
    title: '评价',
    path: '/comment/list',
  },
  {
    icon: 'picture',
    color: 'rgba(244, 63, 94, 1)',
    title: '图库',
    path: '/image/list',
  },
  {
    icon: 'bell',
    color: 'rgba(16, 185, 129, 1)',
    title: '公告',
    path: '/notice/list',
  },
  {
    icon: 'set-up',
    color: '#78787b',
    title: '配置',
    path: '/setting/base',
  },
  {
    icon: 'files',
    color: ' rgba(245, 158, 11, 1)',
    title: '优惠券',
    path: '/coupon/list',
  },
]
</script>

<template>
  <el-row :gutter="10">
    <el-col :sm="3" v-for="(item, index) in iconNavs" :key="index">
      <el-card shadow="hover" @click="$router.push(item.path)" v-rotateCard="{ cursor: true }">
        <div class="content">
          <el-icon size="20" :style="{ color: item.color }">
            <component :is="item.icon" />
          </el-icon>
          <span class="title">{{ item.title }}</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.el-card {
  border: 0;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .el-icon {
    margin-bottom: 8px;
  }

  .title {
    font-size: var(--text-sm);
    margin-top: var(--mt-2);
    overflow: hidden;
    white-space: nowrap;
  }
}

@media screen and (max-width: 375px),
screen and (max-width: 414px) {
  .el-col {
    margin-bottom: 10px;
  }

  :last-child {
    margin-bottom: 0;
  }
}
</style>
